<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <t-card shadow="never" style="width: 1320px">
        <el-form :inline="true" :model="houseQO" ref="houseQO">
          <el-form-item label="楼栋单元" prop="buildingId" label-width="70px">
            <el-select v-model="houseQO.buildingId" filterable clearable placeholder="请选择"
                       style="width: 100px;">
              <el-option v-for="b in allBuildings" :key="b.buildingId"
                         :label="b.buildingName+b.buildingUnit" :value="b.buildingId">
              </el-option>
            </el-select>
          </el-form-item>
          &ensp;
          <el-form-item label="房屋状态" prop="houseStatus" label-width="70px">
            <el-select v-model="houseQO.houseStatus" filterable clearable placeholder="请选择状态"
                       style="width: 120px;">
              <el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房号" prop="houseNo" label-width="50px">
            <el-input v-model="houseQO.houseNo" filterable clearable placeholder="请输入房号"
                      style="width:120px;"></el-input>
          </el-form-item>
          <el-form-item label="面积" prop="minArea" label-width="50px">
            <el-input v-model="houseQO.minArea" filterable clearable placeholder="请输入最小面积"
                      style="width:150px;"></el-input>
            ~
            <el-input v-model="houseQO.maxArea" filterable clearable placeholder="请输入最大面积"
                      style="width:150px;"></el-input>
          </el-form-item>
          &ensp;
          <t-button theme="primary" variant="dashed" size="large" @click="select(1)">查询</t-button>
          &nbsp;
          <t-button theme="primary" variant="outline" size="large"
                    @click="resetForm('houseQO')">重置
          </t-button>
          &nbsp;
          <t-button theme="primary" size="large" @click="dialogAdd=true">添加</t-button>
        </el-form>
      </t-card>
      <br/>
      <t-card shadow="never" style="width: 1320px">
        <el-table :data="currentHouses" border style="height:425px;">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="houseNo" label="房号" align="center"></el-table-column>
          <el-table-column prop="houseArea" label="面积" align="center"></el-table-column>
          <el-table-column prop="houseRemark" label="备注" align="center"></el-table-column>
          <el-table-column prop="houseStatus" label="房屋状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.houseStatus == 0">未入住</span>
              <span v-if="scope.row.houseStatus == 1">已入住</span>
            </template>
          </el-table-column>
          <el-table-column prop="building.buildingName,building.buildingUnit" label="楼栋单元" align="center">
            <template slot-scope="scope">
              {{ scope.row.building.buildingName }}{{ scope.row.building.buildingUnit }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-row>
                <t-button theme="primary" circle plain @click="edit(scope)">编辑</t-button>
                &ensp;
                <t-button theme="primary" variant="outline" circle plain
                          @click="del(scope)">删除</t-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
                       :page-count="totalPage" @current-change="goPage">
        </el-pagination>
      </t-card>

      <el-dialog title="添加房屋信息" :visible.sync="dialogAdd">
        <el-form :model="addHouse" ref="addHouse">
          <el-row>
            <el-col>
              <el-form-item label="楼栋单元" prop="buildingId" label-width="80px">
                <el-select v-model="addHouse.buildingId" filterable clearable placeholder="请选择楼栋单元">
                  <el-option v-for="b in allBuildings" :key="b.buildingId"
                             :label="b.buildingName+b.buildingUnit" :value="b.buildingId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="房号" prop="houseNo" label-width="80px">
                <el-input v-model="addHouse.houseNo" filterable clearable placeholder="请输入房号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="面积" prop="houseArea" label-width="80px">
                <el-input v-model="addHouse.houseArea" filterable clearable placeholder="请输入面积"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注" prop="houseRemark" label-width="80px">
                <el-input v-model="addHouse.houseRemark" filterable clearable
                          placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="状态" prop="houseStatus" label-width="80px">
                <el-select v-model="addHouse.houseStatus" disabled filterable clearable placeholder="未入住">
                  <el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="dialogAdd=false;resetForm('addHouse')">取 消</t-button>
          &ensp;
          <t-button theme="primary" @click="add">确 定</t-button>
        </div>
      </el-dialog>

      <el-dialog title="更新房屋信息" :visible.sync="dialogUpdate">
        <el-form :model="updateHouse" ref="updateHouse">
          <el-row>
            <el-col>
              <el-form-item label="楼栋单元" prop="buildingId" label-width="80px">
                <el-select v-model="updateHouse.buildingId" disabled filterable clearable
                           placeholder="请选择楼栋单元">
                  <el-option v-for="b in allBuildings" :key="b.buildingId"
                             :label="b.buildingName+b.buildingUnit" :value="b.buildingId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="房号" prop="houseNo" label-width="80px">
                <el-input v-model="updateHouse.houseNo" filterable clearable placeholder="请输入房号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="面积" prop="houseArea" label-width="80px">
                <el-input v-model="updateHouse.houseArea" disabled filterable clearable
                          placeholder="请输入面积"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注" prop="houseRemark" label-width="80px">
                <el-input v-model="updateHouse.houseRemark" filterable clearable
                          placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="dialogUpdate=false">取 消</t-button>
          <t-button theme="primary" @click="update">确 定</t-button>
        </div>
      </el-dialog>
    </t-card>
  </div>
</template>

<script>
import axios from "axios"
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Houses",
  data() {
    return {
      houseQO: {},
      allBuildings: [],
      allHouses: [],
      currentHouses: [],

      dialogAdd: false,
      dialogUpdate: false,
      addHouse: {},
      updateHouse: {},

      status: [{
        value: '0',
        label: '未入住'
      }, {
        value: '1',
        label: '已入住'
      }],
      totalPage: 0,
      currentPage: 0,
    }
  },
  methods: {
    del(scope) {
      this.$confirm('此操作将永久删除房屋信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get("api/admin/house/del", {
          params: {
            id: scope.row.houseId
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.currentHouses.splice(scope.$index, 1);
            this.allHouses.splice(scope.$index, 1);
            this.getAll();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'warning',
              message: '房屋已入住，不能删除!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    edit(scope) {
      this.dialogUpdate = true;
      //数据回显
      this.updateHouse = {
        ...scope.row
      }
    },
    update() {
      if (this.updateHouse.houseId) {
        axios.post("api/admin/house/update", this.updateHouse)
            .then(res => {
              if (res.data.code == 200) {
                this.dialogUpdate = false;
                this.goPage(this.currentPage);
                this.$message({
                  type: 'success',
                  message: '更新成功!'
                });
              }

            })
      }
    },
    add() {
      axios.post("api/admin/house/add", this.addHouse)
          .then(res => {
            if (res.data.code == 200) {
              this.dialogAdd = false;
              this.goPage(this.currentPage);
              this.getAll();
              MessagePlugin.success('添加成功')
            }
            this.resetForm('addHouse');
          });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    select(p) {
      axios.get("api/admin/house/list/" + p, {
        params: this.houseQO
      }).then(res => {
        if (res.data.code == 200) {
          this.currentHouses = res.data.data.list;
          this.totalPage = res.data.data.pages;
          this.currentPage = 1;
          this.$message({
            type: 'success',
            message: '查询成功!'
          });
        }
      })
    },
    goPage(p) {
      axios.get("api/admin/house/list/" + p, {
        params: this.houseQO
      }).then(res => {
        if (res.data.code == 200) {
          this.currentHouses = res.data.data.list;
          this.totalPage = res.data.data.pages;
        }
      })
    },
    getAll() {
      axios.get("api/admin/building/getAllByStatus").then(res => {
        if (res.data.code == 200) {
          this.allBuildings = res.data.data;
        }
      })
      axios.get("api/admin/house/getAll").then(res => {
        if (res.data.code == 200) {
          this.allHouses = res.data.data;
        }
      })
    },
  },
  mounted() {
    this.getAll();
    this.goPage(1);
  }
}
</script>

<style>

</style>